<template>
  <view class="form-wrapper">
    <view class="head-box u-m-b-60">
    	<view class="head-title u-m-b-20">设置新密码</view>
    	<view class="head-subtitle">为了您的账号安全，修改密码前请先进行安全验证</view>
    </view>
    <view class="form-item u-border-bottom">
    	<view class="item-content u-flex u-col-center">
    		<view class="item-title">手机号</view>
    		<u-input
    			class="u-m-r-10 u-flex-1"
    			@blur="checkValue($event, 'mobile')"
    			@input="mobileInput($event, 'mobile')"
    			:placeholderStyle="placeholderStyle"
    			v-model="form.data.mobile"
    			type="number"
    		></u-input>
    		<button
    			class="u-reset-button btn-code btn-code-start"
    			:disabled="!form.data.isMobileEnd"
    			:class="{ 'btn-code-end': form.data.isMobileEnd }"
    			slot="right"
    			@tap="getSmsCode('resetpwd')"
    		>
    			{{ codeText }}
    		</button>
    	</view>
    	<view class="message-error">{{ form.error.mobile || '' }}</view>
    </view>
    
    <view class="form-item u-border-bottom">
    	<view class="item-content u-flex u-col-center">
    		<view class="item-title">验证码</view>
    		<u-input
    			class="u-m-r-10 u-flex-1"
    			@blur="checkValue($event, 'code')"
    			@input="checkValue($event, 'code')"
    			placeholder="请输入验证码"
    			:placeholderStyle="placeholderStyle"
    			v-model="form.data.code"
    			type="number"
    		></u-input>
    	</view>
    	<view class="message-error">{{ form.error.code || '' }}</view>
    </view>
    
    <view class="form-item u-border-bottom">
    	<view class="item-content u-flex u-col-center">
    		<view class="item-title">密码</view>
    		<u-input
    			class="u-m-r-10 u-flex-1"
    			@blur="checkValue($event, 'password')"
    			@input="checkValue($event, 'password')"
    			placeholder="请输入密码"
    			:placeholderStyle="placeholderStyle"
    			v-model="form.data.password"
    			type="password"
    		></u-input>
    	</view>
    	<view class="message-error">{{ form.error.password || '' }}</view>
    </view>
    
    <view class="btn-groups-wrapper">
    	<button class="u-reset-button btn-primary" @tap="forgotPwdSubmit">确认</button>
    	<button v-if="!isLogin" class="u-reset-button btn-text" @tap="showAuthModal('accountLogin')">返回登录</button>
    </view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import FormValidate from '@/utils/validate/form';
  
  export default {
  	name: 'ForgorPassword',
    props: {
      placeholderStyle: {
        type: String,
        default: '',
      },
      protocol: {
        type: Boolean,
        required: true,
      },
      checkValue: {
        type: Function,
        required: true,
      },
      validation: {
        type: Function,
        required: true,
      },
      validateAll: {
        type: Function,
        required: true,
      },
      validateSubmit: {
        type: Function,
        required: true,
      },
      closeAuthModal: {
        type: Function,
        required: true,
      },
      codeText: {
        type: String,
        default: '',
      },
    },
  	data() {
  		return {
  			form: {
  				data: {
  					mobile: '', //手机号
  					code: '', //验证码
  					password: '', //密码
  					isMobileEnd: false // 手机号输入完毕
  				},
  				rules: {
  					mobile: FormValidate.mobile,
  					code: FormValidate.code,
  					password: FormValidate.password
  				},
  				error: {
  					mobile: '', //手机号
  					code: '', //验证码
  					password: '' //密码
  				}
  			},
  		};
  	},
    computed: {
    	...mapGetters(['authType', 'isLogin']),
    },
  	methods: {
  		...mapActions(['getUserInfo', 'showAuthModal']),

  		async forgotPwdSubmit() {
  			let that = this;
        
        const { mobile, code, password } = this.form.data
        
  			(await that.validateSubmit()) &&
  				that
  					.$http(
  						'user.forgotPwd',
  						{
  							mobile,
  							code,
  							password
  						},
  						'修改中...'
  					)
  					.then(res => {
  						if (res.code === 1) {
  							that.$u.toast(res.msg);
  							if (that.isLogin) {
  								that.closeAuthModal();
  							} else {
  								that.showAuthModal('accountLogin');
  							}
  						}
  					});
  		},
  	}
  };
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
